<!-- 饼图 -->
<template>
    <el-card>
        <template #header> 执行动作 </template>
        <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

import {watch, onMounted ,PropType} from "vue";

const props = defineProps({
    id: {
        type: String,
        default: "pieChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
    data:{
        type: Object as PropType<Number[]>,
        default: [0,0,0,0],
        required: true,
    }
});
let chart:any=null

const options = {
    grid: {
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
    },
    legend: {
        top: "bottom",
        textStyle: {
            color: "#999",
        },
    },
    series: [
        {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 130],
            center: ["50%", "50%"],
            // roseType: "area",
            label: {
                    show:true,
                    // position: 'inner',
                    // {a}：系列名
                    // {b}：数据名
                    // {c}：数据值
                    // {d}：百分比
                    // {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
                    // {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
                    formatter: "{b}\n{c}条\n{d}%",
                    fontSize: 12,
                    lineHeight: 25,
                },
            itemStyle: {
                borderRadius: 1,
                color: function (params: any) {
                    //自定义颜色
                    const colorList = [
                        "#409EFF",
                        "#67C23A",
                        "#E6A23C",
                        "#F56C6C",
                    ];
                    return colorList[params.dataIndex];
                },

               
            },
            data: [
                { value: props.data[0], name: "保持不变"},
                { value: props.data[1], name: "局内整合"},
                { value: props.data[2], name: "拆除入库"},
                { value: props.data[3], name: "局间整合"},
            ],
        },
    ],
};

function setChartOption(){
    // console.log(options);
    options.series[0].data= [
                { value: props.data[0], name: "保持不变"},
                { value: props.data[1], name: "局内整合"},
                { value: props.data[2], name: "拆除入库"},
                { value: props.data[3], name: "局间整合"},
            ]
    chart.setOption(options);
}

watch(props,(newV,oldV)=>{
    console.log('in action pie watch');
    console.log(props);
    setChartOption();
},{
    deep:true
})



onMounted(() => {
    console.log('in action pie mounted');
    chart = echarts.init(
        document.getElementById(props.id) as HTMLDivElement
    );
    setChartOption();
    window.addEventListener("resize", () => {
        chart.resize();
    });
});


</script>
